<template>
    <div class="watch-info">
        <div class="search-box">
            <v-input-text :emotion="'info'" v-model="id" :label="'Youtube ID'"/>
            <v-button :emotion="'info'" :size="'small'" @click="getInfo">获取信息</v-button>
        </div>
        <div v-show="data.loaded" class="title">
            <h3>视频信息</h3>
        </div>
        <p v-show="data.errorMessage" class="error-message">
            {{ data.errorMessage }}
        </p>
        <ul v-if="data.loaded">
            <li><span>标题</span>
                <div><a :href="'https://www.youtube.com/watch?v=' + data.id" target="_blank">{{ data.title }}</a></div>
            </li>
            <li><span>上传日期</span>
                <div>{{ data.uploadDate }}</div>
            </li>
            <li><span>上传者</span>
                <div><a :href="data.channelUrl" target="_blank">{{ data.uploader }}</a></div>
            </li>
            <li><span>封面图</span>
                <div><img style="height: 300px" :alt="data.id" :src="data.thumbnail"/></div>
            </li>
            <li><span>介绍</span>
                <div>
                    <label class="description">
                        <textarea readonly="readonly" style="width:100%; min-height: 100px" v-model="data.description"/>
                    </label>
                </div>
            </li>
        </ul>
        <div v-show="data.loaded" class="title">
            <h3>视频源</h3>
        </div>
        <v-table v-if="data.loaded"
                 :headers="videoHeaders"
                 :emotion="'info'"
                 :rowsSize="videoFormats.length"
        >
            <template #header-radio></template>
            <template #header-id>编码号</template>
            <template #header-fileSize>大小</template>
            <template #header-video>帧数，分辨率</template>
            <template #header-ext>扩展名</template>
            <template #header-formatNote>提示</template>

            <template #row-radio={index}>
                <label>
                    <input type="radio" name="videoSelect" :value="videoFormats[index].id" v-model="videoSelect"/>
                </label>
            </template>
            <template #row-id="{header,index}">{{ videoFormats[index][header] }}</template>
            <template #row-fileSize="{header,index}">{{ getSizeFormat(videoFormats[index][header]) }}</template>
            <template #row-video="{index}">{{ videoFormats[index]['fps'] + ', ' + videoFormats[index]['width'] + 'x' +
                videoFormats[index]['height'] }}
            </template>
            <template #row-ext="{header,index}">{{ videoFormats[index][header] }}</template>
            <template #row-formatNote="{header,index}">{{ videoFormats[index][header] }}</template>
        </v-table>

        <div v-show="data.loaded" class="title">
            <h3>音频源</h3>
        </div>
        <v-table v-if="data.loaded"
                 :headers="audioHeaders"
                 :emotion="'info'"
                 :rowsSize="audioFormats.length"
        >
            <template #header-radio></template>
            <template #header-id>编码号</template>
            <template #header-fileSize>大小</template>
            <template #header-ext>扩展名</template>
            <template #header-audio>码率，采样率</template>
            <template #header-formatNote>提示</template>

            <template #row-radio={index}>
                <label>
                    <input type="radio" name="audioSelect" :value="audioFormats[index].id" v-model="audioSelect"/>
                </label>
            </template>
            <template #row-id="{header,index}">{{ audioFormats[index][header] }}</template>
            <template #row-fileSize="{header,index}">{{ getSizeFormat(audioFormats[index][header]) }}</template>
            <template #row-audio="{index}">{{ audioFormats[index]['tbr'] + ', ' + audioFormats[index]['asr'] }}
            </template>
            <template #row-ext="{header,index}">{{ audioFormats[index][header] }}</template>
            <template #row-formatNote="{header,index}">{{ audioFormats[index][header] }}</template>
        </v-table>

        <v-button v-if="audioSelect || videoSelect" class="download" :emotion="'success'" @click="confirmTask">下载 [{{
            selectFormats }}]
        </v-button>
        <v-dialog :emotion="'info'" :show="confirmShow" :title="'创建任务'" :size="'small'"
                  @close=" show => confirmShow = show" :canClose="true">
            <v-input-text :emotion="'info'" v-model="taskTitle"/>
            <v-button @click="addTask">确认添加</v-button>
        </v-dialog>
    </div>
</template>

<script>
    import FComponents from'f-vue-components';
    import InfoService from "../script/api/InfoService";
    import SizeUtils from 'fo-utils/src/SizeUtils';
    import TaskService from "../script/api/TaskService";

    export default {
        name: "WatchInfo",
        components: {
            "v-input-text": FComponents.Input.Text,
            "v-button": FComponents.Button,
            "v-table": FComponents.Table,
            "v-dialog": FComponents.Dialog,
        },
        data(){
            return {
                loaded: false,
                videoHeaders: ['radio', 'id', 'video', 'formatNote', 'ext', 'fileSize'],
                audioHeaders: ['radio', 'id', 'audio', 'formatNote', 'ext', 'fileSize'],
                audioSelect: null,
                videoSelect: null,
                confirmShow: false,
                taskTitle: '',
            };
        },
        computed:{
            id:{
                set( value ){
                    this.$store.commit('watchInfo/setId', value);
                },
                get(){
                    return this.data.id;
                }
            },
            proxy(){
                return this.$store.state.proxy;
            },
            data() {
                return this.$store.getters['watchInfo/data'];
            },
            videoFormats() {
                return this.data.formats.filter(f => f.vcodec !== 'none' && f.fps !== null);
            },
            audioFormats() {
                return this.data.formats.filter(f => f.vcodec === 'none');
            },
            selectFormats() {
                let strArr = [];
                if (this.videoSelect) {
                    strArr.push(this.videoSelect);
                }
                if (this.audioSelect) {
                    strArr.push(this.audioSelect);
                }
                return strArr.join("+");
            },
            messageClass() {
                return {}
            },
        },
        methods:{
            getInfo() {
                this.$store.commit('watchInfo/setLoaded', false);
                this.$store.commit('watchInfo/setErrorMessage', undefined);
                InfoService.watchInfo(this.id, this.proxy).then(data => {
                    this.$store.commit('watchInfo/setLoaded', true);
                    this.$store.commit('watchInfo/setData', data);
                }).catch(error => {
                    this.$store.commit('watchInfo/setErrorMessage', error.message);
                });
            },
            getSizeFormat(size) {
                if (size) {
                    return SizeUtils.format(size);
                }
                return '-';
            },
            confirmTask() {
                this.confirmShow = true;
            },
            addTask() {
                TaskService.createTask(this.id, this.selectFormats, this.taskTitle, this.proxy)
                    .then(() => {
                        console.log('success');
                        this.confirmShow = false;
                    })
            }
        }
    }
</script>
<style lang="less">
    .watch-info {
        padding: 2rem 0 1rem 0;

        div.search-box {
            display: flex;
            flex-flow: row;
            justify-content: center;
            align-items: center;

            button {
                display: inline-block;
                flex: 1;
                margin-left: 1.5rem;
            }

            label {
                flex: 5;
            }
        }

        div.title {
            margin: 1rem 0;
        }

        ul {
            li {
                display: flex;
                overflow: hidden;

                span, div {
                    display: inline-block;
                }

                span {
                    background: #d1ecf1;
                    flex: 1;
                    font-weight: bolder;
                    padding: 5px 10px 5px 0;
                    text-align: right;
                }

                div {
                    flex: 5;
                    padding: 5px 2rem;
                }
            }
        }

        label.description {
            textarea {
                width: 100%;
                min-height: 100px;
                outline: none;
                border-radius: 0;
                padding: 5px;
                background: none;
                border: none;
                font-size: 0.8rem;
                resize: none;
            }
        }


        button.download {
            margin-top: 1rem;
            width: 100%;
        }

        p.error-message {
            color: lighten(red, 20%);
            font-weight: bolder;
        }
    }
</style>